<template>
  <div class="adv-filter-base" ref="advFilterBase">
    <div class="label-left" ref="labelLeft">{{ filterData.name }}</div>
    <div class="label-right">
      <div
        class="label-body"
        v-if="filterData.hideAll && filterData.mutiple"
        :class="{ 'is-checked': filterData.value.length === 0 }"
        @click="handleAll"
      >
        全部
      </div>
      <div
        class="label-body"
        v-for="item in spliceData"
        :key="item.value"
        :class="{ 'is-checked': filterData.value.indexOf(item.value) > -1 }"
        @click="handleSub(item)"
      >
        {{ item.label }}
      </div>
      <el-popover popper-class="base-filter-popver" placement="bottom" trigger="click">
        <div
          class="label-body"
          v-for="item in this.filterData.data.slice(spliceNum)"
          :key="item.value"
          :class="{ 'is-checked': filterData.value.indexOf(item.value) > -1 }"
          @click="handleSub(item)"
        >
          <span class="check-icon"></span>
          <span class="check-content"> {{ item.label }}</span>
        </div>
        <div class="label-more" slot="reference" ref="labelMore">更多</div>
      </el-popover>
    </div>
  </div>
</template>
<script>
export default {
  name: 'advFilterBase',
  props: {
    filterData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      spliceNum: 0
    };
  },
  computed: {
    spliceData() {
      return this.filterData.data.slice(0, this.spliceNum);
    }
  },
  mounted() {
    this.$emit('onChange', this.filterData);
    this.handleResize();
    window.addEventListener('resize', this.handleResize);
  },
  methods: {
    // 处理单选
    /**
     * 点击查看是否存在
     * 存在 从筛选结果中删除
     * 不存在 push到筛选结果中
     */
    handleSub(item) {
      let index = this.filterData.value.findIndex(val => item.value === val);
      if (index > -1) {
        this.filterData.value.splice(index, 1);
      } else {
        // 是否多选 多选不执行删除 单选执行删除
        this.filterData.mutiple ? '' : this.filterData.value.splice(index, 1);
        this.filterData.value.push(item.value);
      }
      this.$emit('onChange', this.filterData);
    },
    /**
     * 点击全选 清空筛选结果
     */
    handleAll() {
      this.filterData.value = [];
      this.$emit('onChange', this.filterData);
    },
    // 初始化筛选结果
    initResult() {},
    // 监听浏览器宽度
    handleResize() {
      let width = this.$refs.advFilterBase.clientWidth;
      let labelLeftWidth = this.$refs.labelLeft.clientWidth;
      let labelMoreWidth = this.$refs.labelMore.offsetWidth;
      let SUB_WIDTH = 124;
      let num = 0;
      let NOW_WIDTH = width - labelLeftWidth - labelMoreWidth;
      num = Math.floor(NOW_WIDTH / SUB_WIDTH);
      this.spliceNum = num;
    }
  }
};
</script>
<style lang="scss" scoped>
.adv-filter-base {
  width: 100%;
  display: flex;
  color: black;
  .label-left {
    min-width: 80px;
    text-align: left;
  }
  .label-right {
    display: flex;
    justify-content: flex-start;
    .label-body {
      margin-right: 10px;
      height: 25px;
      line-height: 25px;
      border: 1px solid #ccc;
      width: 74px;
      text-align: center;
      cursor: pointer;
    }
    .label-more {
      line-height: 25px;
      min-width: 40px;
      cursor: pointer;
    }
  }
  .is-checked {
    background-color: #409eff;
    color: white;
  }
}
.base-filter-popver {
  .label-body {
    height: 25px;
    width: 100%;
    line-height: 25px;
  }

  .check-icon {
    display: inline-block;
    position: relative;
    border: 1px solid #dcdfe6;
    border-radius: 2px;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    background-color: #fff;
    z-index: 1;
    transition: border-color 0.25s;
    vertical-align: middle;
    margin-right: 5px;
    &::after {
      box-sizing: content-box;
      content: '';
      border: 1px solid #fff;
      border-left: 0;
      border-top: 0;
      height: 7px;
      left: 4px;
      position: absolute;
      top: 1px;
      transform: rotate(45deg) scaleY(0);
      width: 3px;
      transition: transform 0.15s ease-in 0.05s;
    }
  }
  .label-body.is-checked {
    .check-icon {
      background-color: #409eff;
      border-color: #409eff;
      &::after {
        transform: rotate(45deg) scaleY(1);
      }
    }
  }

  .check-content {
  }
}
</style>
